<template>
    <div class="container">
        <header>
            111
        </header>
        <slot></slot>
        <footer>
            222
        </footer>
    </div>
</template>
<script setup lang="ts" name="">
</script>   
<style scoped>
    /* .container{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    } */
    header {
        width: 100%;
        background-color: #ff0000;
        height: 20px;
        padding: 12px 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1000;
    }
    footer {
        width: 100%;
        background-color: #00ff00;
        height: 20px;
        padding: 12px 16px;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 1000;
    }
</style>